<script setup lang="ts">
import { ref } from 'vue'
interface Props {
  data: any
}

const props = defineProps<Props>()

const emit = defineEmits(["close"])
const handleClickDoc = (event: Event) => {
  event.stopPropagation()
  emit("close", props.data.file_id, 'doc')
}
const handleClickFolder = (event: Event) => {
  event.stopPropagation()
  emit("close", props.data.file_id, 'folder')
}
const handleClickRename = (event: Event) => {
  event.stopPropagation()
  emit("close", props.data.file_id, 'rename')
}
const handleClickDelete = (event: Event) => {
  event.stopPropagation()
  emit("close", props.data.file_id, 'delete')
}
const handleClickCopy = (event: Event) => {
  event.stopPropagation()
  emit("close", props.data.file_id, 'copy')
}
const handleClickPaste = (event: Event) => {
  event.stopPropagation()
  emit("close", props.data.file_id, 'paste')
}
const handleClickRoot = (event: Event) => {
  event.stopPropagation()
  emit("close", props.data.file_id, 'root')
}
const itemAdd = ref(false)
</script>

<template>
  <div class="handle-context" @click.stop>
    <div class="menu-item"  @mouseover="itemAdd = true" @mouseleave="itemAdd = false" v-if="props.data.is_directory === 1">
      <SvgIcon name="code-xinzeng" class="code-svg"/>
      <span>新建</span>
      <div class="item-add handle-context" v-if="itemAdd">
        <div class="add-item" @click="handleClickDoc">
          <span>文件</span>
        </div>
        <div class="add-item" @click="handleClickFolder">
          <span>文件夹</span>
        </div>
      </div>
    </div>
    <div class="menu-item" v-if="props.data.file_id !== 'root'" @click="handleClickCopy">
      <SvgIcon name="code-fuzhi" class="code-svg"/>
      <span>复制</span>
    </div>
    <div class="menu-item" @click="handleClickPaste">
      <SvgIcon name="code-zhantie" class="code-svg"/>
      <span>粘贴</span>
    </div>
    <div class="menu-item" v-if="props.data.file_id !== 'root'" @click="handleClickRename">
      <SvgIcon name="code-chong" class="code-svg"/>
      <span>重命名</span>
    </div>
    <div class="menu-item" v-if="props.data.is_directory === 0" @click="handleClickRoot">
      <SvgIcon name="code-zhu" class="code-svg"/>
      <span>设为主文件</span>
    </div>
    <div class="menu-item" v-if="props.data.file_id !== 'root'" @click="handleClickDelete">
      <SvgIcon name="code-shanchu" class="code-svg"/>
      <span>删除</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.handle-context {
  position: fixed;
  background: #031527;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5px 0;
  width: 148px;
  z-index: 9999;
}

.menu-item {
  display: flex;
  width: 148px;
  align-items: center;
  padding: 8px 12px;
  height: 40px;
  // border-bottom: 1px solid #ccc;
  cursor: pointer;
  position: relative;
  // >span {
  //   width: 100%;
  // }
  &:hover {
    background-color: #15273D;
    width: 148px !important;
  }

  .code-svg {
    margin-right: 5px;
  }
}

.item-add {
  position: absolute;
  width: 120px;
  height: 80px;
  padding: 0;
  // border-bottom: 1px solid #ccc;
  cursor: pointer;
  top: 0px;
  left: 130px;

  .add-item {
    width: 100%;
    height: 40px;
    width: 120px;
    line-height: 40px;

    padding-left: 12px;

    &:hover {
      width: 120px;
      background-color: #15273D;
    }
  }
}
</style>
